<template>
    <div class="addressAddBox">
        <v-header-title :title="title">
            <mt-button slot="right-content" @click="submitForm">保存</mt-button>
        </v-header-title>
        <div class="addressAdd">
            <div class="user-info-wrapper">
                <div class="user-info-title">联系人</div>
                <div class="user-info">
                    <mt-field label="姓名" placeholder="请输入用户名" class="username" v-model="form.username"></mt-field>
                    <div class="sex">
                        <div class="man-box" @click="form.sex='MALE'"><span class="icon-man" :class="{selected:form.sex=='MALE'}"></span>
                            <P>先生</P></div>
                        <div class="woman-box" @click="form.sex='FEMALE'"><span class="icon-woman" :class="{selected:form.sex=='FEMALE'}"></span>
                            <P>女士</P></div>
                    </div>
                    <mt-field label="手机" placeholder="请输入收获手机号" type="tel" class="phone" v-model="form.mobile"></mt-field>
                </div>
            </div>
            <div class="address-info-wrapper">
                <div class="address-info-title">收货地址</div>
                <div class="address-info">
                    <mt-cell title="小区/大厦/学校">
                        <span class="icon-gps" @click="showMap"></span>
                        <p @click="showMap">{{form.address ? form.address : '点击选择'}}</p>
                    </mt-cell>
                    <mt-field label="楼号/门牌号" placeholder="例：6号楼601" v-model="form.detail"></mt-field>
                    <mt-cell title="设为默认地址">
                        <mt-switch v-model="isDefault"></mt-switch>
                    </mt-cell>
                </div>
            </div>
        </div>
        <div id="address" v-show="showMapDiv">
            <div class="address-header">
                地址选择
                <mt-button size="small" type="default" style="float: left;margin-top:5px;" @click="showMapDiv=false">取消</mt-button>
            </div>
            <amap-address @clickAddress="clickAddress" :reduce="50"></amap-address>
        </div>
    </div>
</template>

<script>
  import headerWithTitle from 'components/header/HeaderWithTitle';
  import { Toast, MessageBox, Switch } from 'mint-ui';
  import {updateUserShippingAddress} from 'components/api/interface-hhy';
  import {getSessionStorageItem} from 'components/api/utils'
  export default {
    data() {
      return {
        title: '修改收货地址',
        showMapDiv: false,
        isDefault: false,
        form: {
          uid: 0,
          user_id: 0,
          username: '',
          sex: 'MALE',
          mobile: '',
          address: '',
          detail: '',
          longitude: '',
          latitude: '',
          is_default: ''
        }
      };
    },
    components: {
      'v-header-title': headerWithTitle
    },
    created() {
      let storage = getSessionStorageItem('editAddress');
      this.form = {
        id: storage.id,
        uid: storage.uid,
        user_id: storage.userId,
        username: storage.username,
        sex: storage.sex,
        mobile: storage.mobile,
        address: storage.address,
        detail: storage.detail,
        longitude: storage.longitude,
        latitude: storage.latitude,
        is_default: storage.isDefault
      };
      this.isDefault = this.form.is_default === 'YES';
    },
    methods: {
      showMap() {
        this.showMapDiv = true;
      },
      clickAddress(result) {
        this.form.address = result.name;
        // this.form.detail = result.address;
        this.form.longitude = result.location.split(',')[0]
        this.form.latitude = result.location.split(',')[1]
        this.showMapDiv = false;
      },
      submitForm() {
        if (this.form.username === '') {
          Toast('请填写姓名')
          return false;
        }
        if (this.form.sex === '' || this.form.sex === 'OTHER') {
          Toast('请填选择性别')
          return false;
        }
        if (this.form.mobile === '') {
          Toast('请填写手机号')
          return false;
        }
        if (!(/^1[34578]\d{9}$/.test(this.form.mobile))) {
          Toast('请填写正确的手机号')
          return false;
        }
        if (this.form.address === '') {
          Toast('请选择地址')
          return false;
        }
        if (this.form.detail === '') {
          Toast('请填写楼号/门票号')
          return false;
        }
        // 是否默认
        this.form.is_default = this.isDefault ? 'YES' : 'NO';
        // 提交数据
        updateUserShippingAddress(this.form).then(res => {
          MessageBox.alert('操作成功').then(action => {
            this.$router.push('/address')
          });
        }).catch(err => {
          MessageBox.alert(err.response.data[0]['message']);
        });
      }
    }
  }

</script>

<style lang="stylus">
    @import '../../common/stylus/mixin';
    #address{
        position:absolute;
        width:100%;
        height:100%;
        top:0;
        line-height:1.31944rem;
        font-size:0.5rem;
        text-align:center;
        background:#fff;
    }
    .address-header{
        background:#fff;padding:0 10px;
    }
    .addressAdd {

        .user-info-wrapper {
            border-1px: (rgb(216, 216, 216));
            .user-info-title {
                height: 0.69444rem;
                padding-left: 0.38889rem;
                line-height: 0.69444rem;
                font-size: 0.36111rem;
                border-1px: (rgb(216, 216, 216));
            }
            .user-info {
                background: #fff;
                .mint-field {
                    height: 1.38889rem;
                    .mint-cell-wrapper {
                        padding: 0;
                        margin-left: 0.38889rem;
                        border-1px: (rgb(216, 216, 216));
                        .mint-cell-title {
                            width: auto;
                            margin-right: 0.41667rem;
                            font-size: 0.38889rem;
                            color: #333;
                        }
                        .mint-cell-value {
                            font-size: 0.38889rem;
                            color: #b8b8b8;
                        }
                    }
                }
                .sex {
                    height: 1.38889rem;
                    margin-left: 0.38889rem;
                    border-1px: (rgb(216, 216, 216));
                    .man-box {
                        display: inline-block;
                        margin-left: 1rem;
                        vertical-align: middle;
                        .icon-man {
                            display: inline-block;
                            width: 0.5rem;
                            height: 0.5rem;
                            bg-image('notselected');
                            background-size: 100% 100%;
                        }
                        .selected{
                            bg-image('selected');
                        }
                        p {
                            display: inline-block;
                            margin-left: 0.19444rem;
                            font-size: 0.38889rem;
                            vertical-align: middle;
                        }
                    }
                    .woman-box {
                        display: inline-block;
                        margin-left: 1.75rem;
                        vertical-align: middle;
                        .icon-woman {
                            display: inline-block;
                            width: 0.5rem;
                            height: 0.5rem;
                            bg-image('notselected');
                            background-size: 100% 100%;
                        }
                        .selected{
                            bg-image('selected');
                        }
                        p {
                            display: inline-block;
                            font-size: 0.38889rem;
                            margin-left: 0.19444rem;
                            vertical-align: middle;
                        }
                    }

                }
                .phone {
                    height: 1.38889rem;
                }
            }
        }
        .address-info-wrapper {
            border-1px: (rgb(216, 216, 216));
            .address-info-title {
                height: 0.69444rem;
                padding-left: 0.38889rem;
                line-height: 0.69444rem;
                font-size: 0.36111rem;
                border-1px: (rgb(216, 216, 216));
            }
            .address-info {
                background: #fff;
                .mint-cell {
                    height: 1.38889rem;
                    .mint-cell-wrapper {
                        padding: 0;
                        margin-left: 0.38889rem;
                        border-1px: (rgb(216, 216, 216));
                        .mint-cell-title {
                            flex: none;
                            width: auto;
                            margin-right: 0.41667rem;
                            font-size: 0.38889rem;
                            color: #333;
                        }
                        .mint-cell-value {
                            font-size: 0.38889rem;
                            color: #b8b8b8;
                            .icon-gps {
                                width: 0.5rem;
                                height: 0.5rem;
                                bg-image('gps');
                                background-size: 100% 100%;
                            }
                        }
                    }
                    .mint-cell-allow-right::after {
                        width: 0.33333rem;
                        height: 0.33333rem;
                        right: 0.5rem;
                    }
                }
                .mint-field {
                    height: 1.38889rem;
                    .mint-cell-wrapper {
                        height: 1.38889rem;
                        padding: 0;
                        margin-left: 0.38889rem;
                        border-1px: (rgb(216, 216, 216));
                        .mint-cell-title {
                            flex: none;
                            width: auto;
                            margin-right: 0.41667rem;
                            font-size: 0.38889rem;
                            color: #333;
                        }
                        .mint-cell-value {
                            font-size: 0.38889rem;
                            color: #b8b8b8;
                        }
                    }
                }
            }
        }
    }
</style>
